<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
        <title>芷若横幅报价计算器</title>
    <link href="/static/style/style.css" rel="stylesheet">
    <script src="/static/js/vue.min.js"></script>
    <script src="/static/js/axios.min.js"></script>
    <script src="/static/js/clipboard.min.js"></script>
    </head>
    <body>
        <div class="container" id="app">
            <section class="banner">
                <h3 style="font-size:16px; line-height:30px; text-align: center;color:#fff;">芷若横幅报价计算器</h3>
            </section>
            <section class="tabbar">
                <div @click ="tabtap(index)" :class="tabIndex == index?'tab active':'tab def'" v-for="(item,index) in tabs" :key="index">{{item.name}}</div>
            </section>
            <section class="tabwrapper">
                <div class="tabcon">
                    <div class="panel" v-show="tabs[tabIndex].size">
                        <div class="title">
                            <div class="brage"></div>
                            <div class="code">输入尺寸(单位:米)</div>
                        </div>
                        <div class="body" style="padding-right:10px;">
                            <div class="input-label">
                                <div class="label">长</div>
                                <div class="input">
                                    <input type="text" placeholder="" v-model="height">
                                </div>
                            </div>
                            <div class="input-label">
                                <div class="label">宽</div>
                                <div class="input">
                                    <input type="text" placeholder=""  v-model="width">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="panel" v-show="tabs[tabIndex].statis">
                        <div class="title">
                            <div class="brage"></div>
                            <div class="code">输入条数</div>
                        </div>
                        <div class="body">
                            <div class="input-label">
                                <div class="input" style="padding:0 10px;">
                                    <input type="text" placeholder="请输入" v-model="count">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="panel" v-show="tabs[tabIndex].specs">
                        <div class="title">
                            <div class="brage"></div>
                            <div class="code">选择规格</div>
                        </div>
                        <div class="body rows" v-if="tabs[tabIndex].specs_item.length > 0">
                            <div @click ="specstap(index)" class="items" v-for="(item,index) in tabs[tabIndex].specs_item" :key="index">
                                <div :class="index == specs_id? 'item active': 'item'">{{item.name}}</div>
                            </div>
                        </div>
                    </div>
                    <div class="panel" v-show="tabs[tabIndex].style">
                        <div class="title">
                            <div class="brage"></div>
                            <div class="code">选择样式</div>
                        </div>
                        <div class="body rows" v-if="tabs[tabIndex].style_item.length > 0">
                            <div @click ="styletap(index)" class="items" v-for="(item,index) in tabs[tabIndex].style_item" :key="index">
                                <div :class="index == style_id? 'item active': 'item'">{{item.name}}</div>
                            </div>
                        </div>
                    </div>
                    <div class="panel" v-show="tabs[tabIndex].quality">
                        <div class="title">
                            <div class="brage"></div>
                            <div class="code">选择材质</div>
                        </div>
                        <div class="body rows" v-if="tabs[tabIndex].quality_item.length > 0">
                            <div @click ="qualitytap(index)" class="items" v-for="(item,index) in tabs[tabIndex].quality_item" :key="index">
                                <div :class="index == quality_id? 'item active': 'item'">{{item.name}}</div>
                            </div>
                        </div>
                    </div>
                    <div class="panel">
                        <div class="title">
                            <div class="brage"></div>
                            <div class="code">关于快递</div>
                        </div>
                        <div class="body rows">
                            <div @click ="expresstap(index)" class="items" v-for="(item,index) in express" :key="item.id">
                                <div :class="index == express_id? 'item active': 'item'">{{item.name}}</div>
                            </div>
                        </div>
                    </div>
                    <div class="btnGroup" v-if="content == ''" @click="submit">
                        <div class="btn btnSent">自动生成报价及快捷语</div>
                    </div>
                    <div class="panel" style="padding-left:10px;padding-right:10px;" v-if="content != ''">
                        <textarea class="text" id="text" v-model="content"></textarea>
                    </div>
                    <div class="btnGroup" v-if="content != ''">
                        <div class="btn btnCopy" @click="copytap">一键复制生成内容</div>
                    </div>
                    
                    <div class="btnGroup"></div>
                </div>
            </section>
            <section class="layer" v-show="sign == 0">
                <div class="model">
                    <div class="model-content">
                        <input type="text" v-model="signStr" placeholder="请输入密码">
                        <div class="btn" @click="signPwd">验证</div>
                    </div>
                </div>
            </section>
        </div>
        <script>
            new Vue({
                el: "#app",
                data: {
                    sign:{$sign},
                    signStr:'',
                    tabs:[
                        {
                            id:1,
                            name:'锦旗定制',
                            size:false,
                            statis:false,
                            specs:true,
                            specs_item:{$jqSpecs},
                            style:true,
                            style_item:{$jqStyle},
                            quality:false,
                            quality_item:[],
                        },
                        {
                            id:2,
                            name:'横幅定制',
                            size:true,
                            statis:true,
                            specs:false,
                            specs_item:[],
                            style:true,
                            style_item:{$hfStyle},
                            quality:false,
                            quality_item:[],
                        },
                        {
                            id:3,
                            name:'海报定制',
                            size:true,
                            statis:true,
                            specs:false,
                            specs_item:[],
                            style:false,
                            style_item:[],
                            quality:true,
                            quality_item:{$hbType},
                        },
                    ],
                    express:{$express},
                    tabIndex:0,
                    height:'',
                    width:'',
                    count:'',
                    specs_id:0,
                    style_id:0,
                    quality_id:0,
                    express_id:0,
                    content:'',
                },
                methods:{
                    enterKey(event){
                        console.log(event.code);
                        if(event.code == 'Enter' || event.code =='NumpadEnter'){
                            this.submit();
                        }
                    },
                    enterKeyupDestroyed(){
                        document.removeEventListener('keyup',this.enterKey);
                    },
                    enterKeyup(){
                        document.addEventListener('keyup',this.enterKey);
                    },
                    tabtap(id){
                        if(id == this.tabIndex){
                            return;
                        }
                        this.count='',
                        this.width='',
                        this.height='',
                        this.specs_id=0,
                        this.style_id=0,
                        this.quality_id=0,
                        this.express_id =0,
                        this.content='',
                        this.tabIndex = id;
                    },
                    specstap(id){
                        if(id == this.specs_id){
                            return;
                        }
                        this.specs_id = id;
                    },
                    styletap(id){
                        if(id == this.style_id){
                            return;
                        }
                        this.style_id = id;
                    },
                    qualitytap(id){
                        if(id == this.quality_id){
                            return;
                        }
                        this.quality_id = id;
                    },
                    expresstap(id){
                        if(id == this.express_id){
                            return;
                        }
                        this.express_id = id;
                    },
                    resettap(){
                    	this.count='',
                        this.width='',
                        this.height='',
                        this.content = '',
                        this.specs_id=0,
                        this.style_id=0,
                        this.quality_id=0,
                        this.express_id =0
                    },
                    submit(){
                        let that = this;
                        let tabs = this.tabs[this.tabIndex];
                        let data;
                        if(this.tabIndex == 0){
                           data  = {
                                type:tabs.id,
                                specs:tabs.specs_item[this.specs_id],
                                style:tabs.style_item[this.style_id],
                                express:this.express[this.express_id],
                                _ajax:1
                            }
                        }else{
                            if(this.height == ''){
                                alert('请输入长度');
                                return ;
                            }
                            if(this.width == ''){
                                alert('请输入宽度');
                                return ;
                            }
                            if(this.count == ''){
                                alert('请输入条数');
                                return ;
                            }
                           data = {
                                type:tabs.id,
                                width:this.width,
                                height:this.height,
                                count:this.count,
                                style: tabs.style?tabs.style_item[this.style_id]:'',
                                quality:tabs.quality?tabs.quality_item[this.quality_id]:'',
                                express:this.express[this.express_id],
                                _ajax:1
                            }
                        }

                        axios.post("{:url('index')}",data).then(function(rlt){
                            if(rlt.data.code == 1){
                                that.content = rlt.data.msg;
                            }else{
                                alert(rlt.data.msg);
                            }
                        });
                    },
                    copytap(){
                            this.$copyText(this.content).then(function (e) {
                                alert('复制成功')
                                console.log(e)
                            }, function (e) {
                              alert('当前浏览器不支持复制,请手动复制内容')
                              console.log(e)
                            })
                    },
                    signPwd(){
                        if(this.signStr == ''){
                            return ;
                        }
                        axios.post("{:url('login')}",{sign:this.signStr,_ajax:1}).then(function(rlt){
                            if(rlt.data.code == 1){
                                location.reload()
                            }else{
                                alert(rlt.data.msg);
                            }
                        });
                    }
                }
                ,mounted(){
                    this.enterKeyup();
                },
                destroyed(){
                    this.enterkeyupDestroyed();
                }
            })
        </script>
    </body>
</html>